<template>
  <div class="user-kanban">
    <div style="padding: 10px 0">
      <a-typography-title :level="4">我的看板</a-typography-title>
    </div>

    <a-table :dataSource="kanbanList" rowKey="_id" :columns="kanColumns">
      <template #operation="{ record }">
        <a-popconfirm title="确定要删除吗?" @confirm="delKanban(record)">
          <a-button type="link" danger>删除</a-button>
        </a-popconfirm>
      </template>
    </a-table>
  </div>
</template>
<script>
  import { useStore } from 'vuex';
  import {
    UserOutlined,
    DeleteOutlined,
    EditOutlined,
    ShareAltOutlined,
    LineChartOutlined,
    ApartmentOutlined,
  } from '@ant-design/icons-vue';
  import { defineComponent, ref, reactive, computed, toRefs } from 'vue';
  import io from '@/utils/http/index.js';

  const kanColumns = [
    {
      title: '看板名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '看板描述',
      dataIndex: 'describe',
      key: 'describe',
    },
    {
      title: '操作',
      dataIndex: 'operation',
      width: 100,
      slots: { customRender: 'operation' },
    },
  ];

  export default {
    setup() {
      const store = useStore();

      store.dispatch('kanban/getList');

      const delKanban = (item) => {
        io({
          url: '/show/api/kanban/' + item._id,
          method: 'delete',
        }).then((res) => {
          store.dispatch('kanban/getList');
        });
      };

      return {
        delKanban,
        kanColumns,
        kanbanList: computed(() => store.state.kanban.list),
      };
    },
  };
</script>
